<template>
  <a-modal
    :title="form && form.id ? '修改广告' : '新建广告'"
    centered
    :visible="visible"
    :confirmLoading="loading"
    destroyOnClose
    @ok="handleOk"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" :model="form"
                    :rules="rules" v-bind="formLayout" labelAlign="left">
        <a-form-model-item ref="title" label="广告标题" prop="title">
          <a-input :disabled="disabled" placeholder="请输入广告标题" v-model="form.title"/>
        </a-form-model-item>
        <a-form-model-item ref="link" label="链接" prop="link">
          <a-input addon-before="Http://" v-model="form.link" placeholder="请输入链接" :disabled="disabled" />
        </a-form-model-item>
        <a-form-model-item ref="file" label="图片" prop="file">
          <a-upload
            :disabled="disabled"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :customRequest="beforeContractUpload"
          >
            <img class="avatar" v-if="form.file" :src="formatAvatar(form.file)" alt="file"/>
            <div v-else>
              <div class="ant-upload-text">
                图片
              </div>
            </div>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item ref="status" label="启用/停用" prop="status">
          <a-radio-group :disabled="disabled" v-model="form.status">
            <a-radio value="0">
              启用
            </a-radio>
            <a-radio value="1">
              停用
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import {upload} from "@/api/common";

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 19}
      }
    }
    return {
      treeData: [],
      form: {
        id: undefined,
        title: undefined,
        link: undefined,
        file: undefined,
        status: "0",
      },
      disabled: false,
      rules: {
        title: [
          { required: true, message: '请输入广告标题', trigger: 'blur' },
        ],
        link: [
          { required: true, message: '请输入链接', trigger: 'blur' },
        ],
        file: [
          { required: true, message: '请选择图片', trigger: 'change' },
        ],
        status: [
          { required: true, message: '请选择启用状态', trigger: 'change' },
        ],
      },
    }
  },
  created() {
    this.$watch('model', () => {
      this.disabled = this.model.disabled
      this.form = {
        ...this.form,
        ...this.model
      };
    })
  },
  methods: {
    formatAvatar(e) {
      if (e) {
        return this.$staticPrefix(e);
      }
    },
    beforeContractUpload(e) {
      const formatData = new FormData()
      formatData.append('file', e.file)
      upload(formatData).then(ret => {
        if (ret.success) {
          formatData.delete('file');
          this.form = {
            ...this.form,
            file: ret.data
          }
        }
      })
    },
    handleOk() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit('ok', this.form)
        } else {
          return false;
        }
      });
    },
    resetFields() {
      this.$refs.ruleForm.resetFields();
      this.form = {
        id: undefined,
        title: undefined,
        link: undefined,
        file: undefined,
        status: "0",
      };
    },
  }
}
</script>
